<template>
    <div  class="app-container">
        <div class="app-container" style="float: left">
            <el-form ref="searchForm" :model="searchForm" style="width:400px">
                <el-form-item>
                    <el-input v-model="searchForm.goodsName"  placeholder="商品名称" size="mini" style="width:60%;padding-right: 10px;"></el-input>
                    <el-button size="mini"  type="primary"  @click="goodsHandleDataSelect()">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="app-container" style="float: right">
            <el-button size="mini"  type="success" @click="goodsHandleAdd()">新增</el-button>
            <el-button size="mini"  type="primary"  @click="goodsOnLine()">上线</el-button>
            <el-button size="mini"  type="warning"  @click="goodsOffLine()">下线</el-button>
            <el-button size="mini"  type="info" @click="handleDetail()">详情</el-button>
            <el-button size="mini" @click="handleEdit()" type="primary">
                            编辑
              </el-button>
            <el-button size="mini"  type="primary"  @click="goodsInfoDownLoad()">下载</el-button>
        </div>
        <div>
            <el-table :data="goodsTableData" style="width: 100%;" border="true"
                      stripe="true" @row-click="handleRowClick"  @selection-change="handleSelectionChange"
                        >
                <el-table-column type="selection" width="55" />
                <el-table-column prop="goodsName" align="center" label="商品名称"/>
                <el-table-column prop="themeName" align="center" label="所属主题"/>
                <el-table-column prop="price" align="center" label="销售价格(￥)"/>
                <el-table-column prop="costPrice" align="center" label="成本价格(￥)"/>
                <el-table-column prop="profitPrice" align="center" label="预计盈亏额(￥)"/>
                <el-table-column prop="num"  align="center" label="库存"/>
                <el-table-column prop="status"  align="center" label="状态">
                    <template #default="scope">
                        <span v-if="scope.row.isEnable == 1" >已上线</span>
                        <span v-if="scope.row.isEnable == 0" >已下线</span>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="100">
                    <template #default="scope">
                        <el-popconfirm title="确定删除吗"
                                       confirmButtonText="确定"
                                       cancelButtonText="取消"
                                       :icon="InfoFilled"
                                       icon-color="red"
                                       @confirm="handleDel(scope.row)">
                            <template #reference>
                                <el-button size="mini" type="danger">删除</el-button>
                            </template>
                        </el-popconfirm>
                       
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div style="margin-left: 20px">

            <el-pagination
                    v-model:currentPage="currentPage"
                    :page-size="currentSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>

        </div>

        <el-dialog v-model="goodsDialogFormVisible" title="新增商品"  width="50%" :open="getAllThemeInfo()">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="所属主题" >
                <el-select v-model="form.themeId" filterable placeholder="请选择" style="width:60%">
                    <el-option
                            v-for="item in themeInfo"
                            :key="item.id"
                            :label="item.themeName"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品名称" >
                <el-input v-model="form.goodsName" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="商品编号">
                <el-input v-model="form.goodsCode"  readonly=true style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="销售价格(￥)">
                <el-input v-model="form.price" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="成本价格(￥)">
                <el-input v-model="form.costPrice" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="利润价格(￥)">
                <el-input v-model="form.profitPrice" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="库存(件)">
                <el-input v-model="form.num" style="width:90%"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="form.goodsRemark" style="width:90%"> </el-input>
            </el-form-item>
            <el-form-item label="商品图">
                <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-change="handleChange"
                        :file-list="fileList"
                >
                <el-button type="primary">上传图片</el-button>
                <template #tip>
                     <div class="el-upload__tip">
                           仅支持 jpg/png格式
                    </div>
                 </template>
                </el-upload>
            </el-form-item>
        </el-form>
            <template #footer>
               <span class="dialog-footer">
                       <el-button type="primary" style="margin-left: 10px;" @click="GoodsSubmit()">确定</el-button>
                        <el-button @click="GoodsHandleCancle()" style="margin-left: 10px;" >取消</el-button>
               </span>
            </template>
        </el-dialog>
    </div>
</template>
<script>

    import request from "../../utils/request";
    import {ElMessage} from "element-plus";
    import { Edit } from '@element-plus/icons';

    export default {
        name: "GoodsManager",
        data(){
            return {
                form:{},
                goodsDialogFormVisible:false,
                goodsTableData:[],
                total:0,
                currentSize:6,
                currentPage:1,
                ///////////////////
                searchForm:{"goodsName":""},
                themeInfo:[],
                goodIds:[]
            };
        },
        created(){
            this.goodsDataList();
        },
        methods: {

            getAllThemeInfo(){
                request.get("/api/theme/getAllThemeInfo").then(resp=>{
                    if(resp.status == 'M0200'){
                        this.themeInfo=resp.data
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },

            goodsHandleAdd(){
                this.goodsDialogFormVisible=true;
                this.GoodsCodeAdd();
            },
            handleRowClick(row){
                this.$refs.configTableRef.toggleRowSelection(row)  
            },
            handleSelectionChange(targetList){
               // 数据处理传参使用
                let queryValueList = []
                targetList.forEach(ite => {
                    queryValueList.push(ite.id)
                })
                this.goodIds = queryValueList     
            },
            goodsOnLine(){
                if(this.goodIds==''){
                        ElMessage({
                            message:"还没有选中操作数据",
                            type:"warning"
                        })
                    return;
                }
                let data={
                    'ids':this.goodIds,
                    'operatorType':'1'
                }
                request.post("/api/goods/updateIsEnable",data).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                    this.goodsDataList()
                })
            },
            goodsOffLine(){
                if(this.goodIds==''){
                        ElMessage({
                            message:"还没有选中操作数据",
                            type:"warning"
                        })
                    return;
                }
                let data={
                    'ids':this.goodIds,
                    'operatorType':'0'
                }
                request.post("/api/goods/updateIsEnable",data).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                    this.goodsDataList()
                })
            },
            GoodsSubmit(){
                request.post("/api/goods/addGoodsInfo",this.form).then(res=>{
                    if(res.status =='M0200'){
                        //提示
                        ElMessage({
                            message:"添加成功",
                            type:"success"
                        })
                    }else{
                        ElMessage({
                            message:"添加失败:"+res.msg,
                            type:"error"
                        })
                    }
                    //关闭弹出
                    this.goodsDialogFormVisible=false,
                        //加载列表
                    this.goodsDataList()
                })
            },

            goodsHandleDataSelect(){
              this.goodsDataList() ;
            },

            goodsInfoDownLoad(){
                request.get("/api/goods/exportGoodsInfo").then(res=>{
                    if(res.status == 'M0200'){
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"success"
                        })
                    }else{
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },

            goodsDataList(){
                request.get("/api/goods/getGoodsInfoPage",{
                    params:{
                        currentPage:this.currentPage,
                        currentSize:this.currentSize,
                        searchContent:this.searchForm.goodsName
                     }
                }).then(res=>{
                    if(res.status == 'M0200'){
                        this.goodsTableData = res.data.list;
                        this.total = res.data.total;
                    }else{
                            //提示
                        ElMessage({
                                message:res.msg,
                                type:"error"
                        })
                    }
                })
            },
            handleDetail(){
              let id=  this.goodIds[0];
              if(this.goodIds.length==1){
                    this.$router.push({
                        path:'/GoodsEdit',
                        query:{
                            id:id,
                            type:'detail'
                        }
                    });
               }else{
                    ElMessage({
                       message:"需要选中一条数据",
                       type:"warning"
                    })
               }

            },
            handleEdit(){
              let id =  this.goodIds[0];
              if(this.goodIds.length==1){
                    this.$router.push({
                        path:'/GoodsEdit',
                        query:{
                            id:id,
                            type:'edit'
                        }
                    })
                }else{
                    ElMessage({
                       message:"需要选中一条数据",
                       type:"warning"
                    })
               }
            },

            handleDel(row){
                if(row.isEnable=='1'){
                    ElMessage({message:"必须禁用状态才能删除",type:"warning"});    
                    return;
                }
                request.post('/api/goods/GoodsDelById',row).then(resp=>{
                    if(resp.status == 'M0200'){
                       this.goodsDataList();
                    }else{
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },

            GoodsCodeAdd(){
                request.get("/api/user/getBH",{
                    params:{
                        prefix:"GD"
                    }
                }).then(resp=>{
                    if(resp.status == 'M0200'){
                        this.form.goodsCode=resp.data
                    }else{
                        //提示
                        ElMessage({
                            message:res.msg,
                            type:"error"
                        })
                    }
                })
            },
            handleSizeChange(v){
                this.currentSize=v
                this.goodsDataList()
            },
            handleCurrentChange(v){
                this.currentPage=v
                this.goodsDataList()
            },

        }
    }
</script>

<style scoped>

</style>
